<template>
  <div class="app">
    <div class="intoshow">
      <div id="main_category2" ref="main" style="height: 320px;"> </div>
    </div>
  </div>
</template>
<script>
import { onMounted } from 'vue';
import * as echarts from "echarts";
export default {
  setup() {
    onMounted(() => {
      let myChart = echarts.init(document.getElementById("main_category2"));
      // 绘制图表
      myChart.setOption({
        title: {
          text: '总收入年度统计',
          textStyle: {
            fontSize: 15, //字体大小
          },
        },
        grid: {
          left: '10%',
          right: '10%',
          bottom: '18%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['2017', '2018', '2019', '2020', '2021', '2022'],
          axisPointer: {
            type: 'shadow'
          },
          axisLabel: {
            interval: 0  //设置间隔为0
          }
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [456, 944, 566, 677, 333, 444],
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            },
            itemStyle: {
              normal: {
                color: '#739ffa'
              }
            }
          }
        ]
      });
    });
  },
  data() {
    return {
    };
  },
  methods: {
  }
};
</script>
<style>
.app {
  margin: 0;
}
</style>